<template>
	<div>
		<!-- 轮播图区域 -->
		<swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>

    <!-- 九宫格 -->
     <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/home/newslist">
                        <img src="../../images/menu1(1).png" alt="">
                        <div class="mui-media-body">新闻资讯</div>
                  </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/home/photolist">
                        <img src="../../images/menu2.png" alt="">
                        <div class="mui-media-body">图片分享</div>
                  </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/home/goodslist">
                        <img src="../../images/menu3.png" alt="">
                        <div class="mui-media-body">商品购买</div>
                  </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <img src="../../images/menu4.png" alt="">
                        <div class="mui-media-body">留言反馈</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <img src="../../images/menu5.png" alt="">
                        <div class="mui-media-body">视频中心</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <img src="../../images/menu6.png" alt="">
                        <div class="mui-media-body">联系我们</div></a></li>
       </ul> 
	</div>
</template>

<script>
  // 引入公用的轮播图组件
  import swiper from '../subcomponents/swiper.vue'
  import { Toast } from 'mint-ui'

	export default {
		data() {
			return {
				lunbotuList: [] // 保存轮播图的数组
			}
		},
		created() {
			this.getLunbotu()
		},
		methods: {
			getLunbotu() {
     			this.$http.get("api/getlunbo").then(result => {
     			  // console.log(result.body);
     			  if (result.body.status === 0) {
     			    // 成功了
     			    this.lunbotuList = result.body.message;
     			  } else {
     			    // 失败的
     			    Toast("加载轮播图失败。。。");
     			  }
     			});
			}
		},
    components: {
      swiper
    }
	}
	
</script>

<style lang="scss" scoped>
	.mint-swipe {
		height: 200px;

		.mint-swipe-item {
   			&:nth-child(1) {
   			 background-color: yellow;
   			}
   			&:nth-child(2) {
   			  background-color: blue;
   			}
   			&:nth-child(3) {
   			  background-color: green;
   			}  
   		img {
   			width: 100%;
   			height: 100%;
   		}
   	}
	}

  .mui-grid-view.mui-grid-9 {
    background-color: #fff;
    

  .mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
    border: none;
  }

    img {
      width: 60px;
      height: 60px;
    }
    .mui-media-body {
      font-size: 12px;
    }
  }

</style>